{% extends 'base.html' %}
{% block title %}
    {{ title | default('资产管理系统') }}
{% endblock title %}
{% block css %}
    <link href="{{ url_for('static', filename='js/data-table/css/jquery.dataTables.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='js/data-table/css/dataTables.responsive.css') }}" rel="stylesheet">
{% endblock css %}
{% block pageHead %}
    <h3>{{ pageHead | default('机房管理') }}</h3>
{% endblock pageHead %}
{% block pageContent %}
    <div class="row">
                    <div class="col-sm-12">
                        <section class="panel">
                            <header class="panel-heading ">
                                <button class="btn btn-success" id="btn-addRoom" type="button">
                                    <i class="fa fa-plus"></i>
                                    新增
                                </button>
                                <span class="tools pull-right">
                                    <a class="fa fa-repeat box-refresh" href="javascript:;"></a>
                                </span>
                            </header>
                            <div style="margin: 0px 5px">
                                <table class="table responsive-data-table data-table">
                                    <thead>
                                        <tr>
                                            <th class="never">
                                                id
                                            </th>
                                            <th>
                                                机房名称
                                            </th>
                                            <th>
                                                机房地址
                                            </th>
                                            <th>
                                                管理员
                                            </th>
                                            <th>
                                                联系方式
                                            </th>
                                            <th>
                                                操作
                                            </th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </section>
                    </div>

                </div>
    <div class="modal fade" id="addRoomModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="my-modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label" for="roomId">id</label>
                            <div class="col-lg-10">
                                <input id="roomId" class="form-control" type="text" disabled="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label" for="roomName">机房名称</label>
                            <div class="col-lg-10">
                                <input id="roomName" class="form-control" type="text" placeholder="请输入机房名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label" for="address">机房地址</label>
                            <div class="col-lg-10">
                                <input id="address" class="form-control" type="text" placeholder="请输入机房地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label" for="contacts">管理员</label>
                            <div class="col-lg-10">
                                <input id="contacts" class="form-control" type="text" placeholder="请输入管理员姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-sm-2 control-label" for="contacts_tel">联系方式</label>
                            <div class="col-lg-10">
                                <input id="contacts_tel" class="form-control" type="text" placeholder="请输入联系电话">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                    <button class="btn btn-success" type="button" id="btn-saveRoom">保存</button>
                </div>
            </div>
        </div>
    </div>
{% endblock pageContent %}
{% block js %}
    <!--Chart JS-->
    <script>
    var list_url="{{ url_for('api_dp.roomlist') }}";
    var post_url="{{ url_for('api_dp.room') }}";
    var get_url="{{ url_for('api_dp.room') }}";
    </script>
    <script src="{{ url_for('static', filename='js/data-table/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/data-table/js/bootstrap-dataTable.js') }}"></script>
    <script src="{{ url_for('static', filename='js/data-table/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/server_room.js') }}"></script>
{% endblock js %}